Skip to content

feat: add user-configurable custom navigation links in sidebar#1779

Closed
mrmees wants to merge 4 commits intofluidd-core:developfrom
mrmees:feat/custom-nav-links
Closed

feat: add user-configurable custom navigation links in sidebar#1779
mrmees wants to merge 4 commits intofluidd-core:developfrom
mrmees:feat/custom-nav-links

Conversation

@mrmees
Copy link

@mrmees mrmees commented Jan 28, 2026 •
edited
Loading

Motivation

Fluidd's sidebar currently only links to internal pages, but many users treat Fluidd as their printer "home base" and need quick access to companion services, other printer instances, documentation, and community resources. This feature extends the sidebar into a customizable navigation hub without changing the existing experience for users who don't need it.

Use cases

  • Multi-printer setups — users running multiple Klipper instances want one-click links between their Fluidd dashboards (e.g. "Printer 2", "Printer 3" in the sidebar)
  • Companion services — many setups include adjacent tools like Grafana dashboards, camera feeds, Home Assistant, Obico, or Spoolman — currently requires bookmarks or manually typing URLs
  • Documentation — quick access to Klipper docs, printer-specific build guides, or slicer profiles while actively printing
  • Community resources — links to Discord servers, forums, or GitHub repos relevant to the user's specific printer or configuration
  • Vendor/kit links — theme presets already provide one link per vendor (Voron, RatRig, etc.), but users may want additional vendor resources or to hide the default one entirely

Feature overview

Adding custom links

Users can add external links via Settings → Navigation → Add Link. Each link supports:

  • Title and URL
  • Icon selection (MDI autocomplete with 7000+ icons, or a custom SVG path)
  • Color picker
  • Open target (new tab or same tab)
  • Sort position for ordering

Settings management

All navigation links — both theme-provided and user-created — appear in a single unified card under Settings → Navigation. Custom links have edit and delete controls; theme links have a visibility toggle.

Theme link control

Theme-preset links (e.g. Voron, RatRig, Qidi Tech) can be individually hidden via an eye toggle in settings, giving users control over vendor-provided links without removing them permanently.

Confirm before opening (optional)

A global toggle adds a confirmation dialog before opening any navigation link, providing an extra layer of safety for shared or kiosk setups.

Technical notes

  • Shared icon component — new AppNavLinkIcon.vue renders three icon types (SVG path array, single SVG path, MDI icon) and is shared across sidebar and settings, eliminating template duplication
  • Getter composition — getCustomNavLinks composes from getThemeNavLinks and getDbNavLinks to avoid duplicating preset-to-link mapping logic
  • Theme logo SVG fix — EVA, RatRig, and Z-Bolt logo SVGs updated to use --v-primary-base CSS variable directly, enabling theme color reactivity without extra JavaScript
  • Qidi Tech — new rescaled icon and updated theme color (#3885EA)
  • No breaking changes; fully backward-compatible with existing configurations

New files

File Purpose
src/components/ui/AppNavLinkIcon.vue Shared icon renderer for all nav link icon types
src/components/settings/navigation/NavLinkDialog.vue Add/edit dialog for custom navigation links

Test plan

  • Open Settings → Navigation: single card shows confirm toggle, "Add" button, theme links (if any), and custom links
  • Add a custom link with title, URL, MDI icon, color, and target — verify it appears in the sidebar
  • Edit and delete custom links — verify changes reflect immediately
  • Toggle theme link visibility (eye icon) — verify the link hides/shows in the sidebar
  • Reorder links via position field — verify sort order in sidebar
  • Custom SVG path icons render correctly in both settings and sidebar
  • Icon colors in the settings list match the configured link color
  • Theme logos (EVA, RatRig, Z-Bolt) react to theme color changes
  • Settings persist across page reload

🤖 Generated with Claude Code

mrmees and others added 3 commits January 27, 2026 19:35
@mrmees @claude
feat: add user-configurable custom navigation links in sidebar
9775818 
Allow users to add external links to the sidebar navigation via
Settings. Each link has a title, URL, icon (from existing MDI set),
open behavior (new tab / same tab), and sort position. Settings
persist to Moonraker's database and sync across browsers.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@mrmees @claude
feat: enhance custom navigation link dialog with icon type selector a…
3a8ec66 
…nd improvements

- Replace separate icon/image sections with unified dropdown icon type
  selector (Built In Icon, Custom SVG Icon, SVG Path Data, Custom Image)
- Add SVG file upload support alongside existing path data input
- Switch to Vuetify v-color-picker in a popup v-menu for custom colors
- Add theme color toggle (v-switch) that preserves custom color on toggle
- Add live icon preview in dialog header
- Add URL field warning hint (yellow highlight) for missing protocol
- Add confirm dialog before opening custom nav links
- Remove custom scrollbar styling, let browser handle natively
- Update theme preset SVG path data in config files

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@mrmees @claude
feat: add draggable sidebar links, bookmarks popup, and unified conte…
0a8c4c1 
…xt menu

- Drag-to-reorder for visible system links and custom links independently
- Bookmarks popup for collapsed custom links (mirrors hamburger menu pattern)
- Unified right-click context menu for system, custom, and theme links
- Edit/delete custom links directly from sidebar context menu
- Collapse custom links to bookmarks via context menu
- System link ordering persists via systemLinkOrder config
- Open-in-new-tab toggle in Navigation Settings
- Register mdiBookmarkMultiple icon

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@mrmees mrmees force-pushed the feat/custom-nav-links branch 8 times, most recently from 506ad33 to 140c034 Compare January 29, 2026 03:18
@mrmees @claude
feat: add expandable sidebar with persistent toggle and hover-to-expand
714eb98 
- Logo click toggles sidebar expansion to show link titles (persisted)
- Layout button hover temporarily expands sidebar
- More/Bookmarks menus open on hover, close when hovering other items
- Context menus on More/Bookmarks activators (show all, add link)
- Theme-colored dividers between menu sections
- Tooltips suppressed when sidebar expanded
- Settings sub-nav coexists with expanded sidebar (wider drawer)
- Layout button always visible, navigates home on click
- Icon type hints added to NavLinkDialog
- Navigation settings reordered, confirm hidden when new-tab enabled

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@mrmees mrmees force-pushed the feat/custom-nav-links branch from 140c034 to 714eb98 Compare January 29, 2026 03:35
@mrmees mrmees closed this Jan 29, 2026
@DrFate09
Copy link

DrFate09 commented Feb 3, 2026

@mrmees Why was this closed before merging it into develop? This feature would be nice to have incorporated into Fluidd 🙂

@mrmees
Copy link
Author

mrmees commented Feb 3, 2026 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@mrmees @DrFate09